<template>
    <el-button type="primary" @click="add">
        添加
    </el-button>
    <el-dialog v-model="dialogVisible" title="添加" width="500" >
        <span>
            <Alertform :ruleForm="ruleForm" :rules="rules" :ruleFormRef="ruleFormRef" :formSize="formSize" :submitForm="submitForm" :offalert="offalert"/>
        </span>
    </el-dialog>
</template>

<script lang="ts" setup>
import rest from "../api/request"
import { ElMessageBox ,ElMessage} from 'element-plus'
import Alertform from './alertform.vue';
const dialogVisible = ref(false)
import { reactive, ref, render, watchEffect } from 'vue'
import type { ComponentSize, FormInstance, FormRules } from 'element-plus'
let y=defineProps(["render"])
//关闭添加弹框
const offalert=()=>{
    dialogVisible.value=false
}
interface RuleForm {
    id: any,
    username: string
    name: string
    type: string
    tel: string
    status: number
    date: string
}
const add = () => {
    dialogVisible.value = true
}
const formSize = ref<ComponentSize>('default')
const ruleFormRef = ref<FormInstance>()
//表单数据
let ruleForm = reactive<RuleForm>({
    id: '',
    username: '',
    name: '',
    type: '',
    tel: '',
    status: 1,
    date: '',
})
//表单验证
const rules = reactive<FormRules<RuleForm>>({
    username: [{ required: true, message: '请输入用户名称', trigger: 'blur' },],
    name: [{ required: true, message: '请输入用户昵称', trigger: 'blur' },],
    type: [{ required: true, message: '请输入部门', trigger: 'blur' },],
    tel: [{ required: true, message: '请输入手机号', trigger: 'blur' },],
})
//点击添加按钮
const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            console.log(ruleForm)
            ruleForm.date=new Date().toLocaleDateString()
            console.log(ruleForm)
            //添加
            rest.post("/list", ruleForm).then(res=>{
                console.log(res)
                ElMessage({
                        message: '添加成功',
                            type: 'success',
                })
                offalert()
                y.render()
                ruleForm={
                    id: '',
                    username: '',
                    name: '',
                    type: '',
                    tel: '',
                    status: 1,
                    date: '',
                }
            })
        } else {
            console.log('2!', fields)
        }
    })
}

</script>

<style scoped></style>